<template>
  <div class="shouyigongxiang">
    <div class="left">
      <a-menu
        mode="inline"
        :open-keys="openKeys"
        style="width: 200px"
        @openChange="onOpenChange"
      >
        <a-sub-menu key="sub1">
          <span slot="title"><a-icon type="search" /><span>算例</span></span>
          <a-menu-item key="1"> 算例 1 </a-menu-item>
          <a-menu-item key="2"> 算例 2 </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </div>
    <div class="right">
      <div class="description">
        <h3>问题描述:</h3>
        <p>
          北邮水果店出售批发市场进购的西瓜果切。假设西瓜果切售价1元，水果店制作的每个西瓜果切需要批发市场0.5元的成本收购，水果店需要0.25元的加工成本。西瓜果切的日需求量按𝑁(100,〖20〗^2)分配。未满足的需求对每一方造成0.20元的商誉损失。未售出的西瓜果切必须在每天结束时扔掉，没有任何剩余价值。目前，批发市场对北邮水果店的每个西瓜果切批发价为0.60美元。
        </p>
        <p>
          回顾北邮水果店出售西瓜果切的案例，并假设批发市场向北邮水果店提供一个收益共享契约，参数
          φ=0.4 。当 𝑤 取何值时能协调供应链，此时的利润是多少？
        </p>
      </div>
      <div class="parameter">
        <h3>参数:</h3>
        <div class="pictures">
          <img src="/imgs/example/批发价1.png" alt="" />
          <img src="/imgs/example/批发价2.png" alt="" />
        </div>
        <div class="dataNum">
          <span>φ= <a-input v-model="φ"/></span>

          <span>p= <a-input v-model="p"/></span>
          <span>c<sub>s</sub>= <a-input v-model="cs"/></span>
          <span>c<sub>r</sub>= <a-input v-model="cr"/></span>
          <span>g<sub>s</sub>= <a-input v-model="gs"/></span>
          <span>g<sub>r</sub>= <a-input v-model="gr"/></span>
          <span>v= <a-input v-model="v"/></span>
          <span>w= <a-input v-model="w"/></span>
        </div>
      </div>
      <div class="functions">
        <h3>关键函数：</h3>
      </div>
      <div class="compute">
        <div class="button">
          <a-button type="primary" @click="compute"> 计算 </a-button>
        </div>
      </div>
      <div class="result">
        <a-card
          style="width: 480px"
          v-for="(item, index) in picArr"
          :key="index"
        >
          <img slot="cover" alt="example" :src="item" />
        </a-card>
        <a-card style="width: 480px" v-if="res.values && res.values.pi > -1">
          <p>
            <span style="margin-right: 10px">π:</span>
            {{ res.values.pi.toFixed(2) }}
          </p>
          <p>
            <span style="margin-right: 10px">π<sub>r</sub>:</span>
            {{ res.values.pir.toFixed(2) }}
          </p>
          <p>
            <span style="margin-right: 10px">π<sub>s</sub>:</span>
            {{ res.values.pis.toFixed(2) }}
          </p>
          <p>
            <span style="margin-right: 10px">q*:</span>
            {{ res.values.qstar.toFixed(2) }}
          </p>
          <p>
            <span style="margin-right: 10px">s(q):</span
            >{{ res.values.sq.toFixed(2) }}
          </p>
          <p>
            <span style="margin-right: 10px">w(r):</span
            >{{ res.values.wr.toFixed(2) }}
          </p>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script>
import { URL } from '../../api/api.js'
export default {
  data() {
    return {
      URL:URL,
      rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
      openKeys: ['sub1'],
      φ: 0.4,
      w: 0,
      v: 0,
      gr: 0,
      gs: 0,
      cr: 0,
      cs: 0,
      p: 0,
      picArr: [],
      res: {},
    }
  },
  mounted() {
    this.φ = this.$store.state.ExampleData[0].params[0].default_value
    this.w = this.$store.state.ExampleData[0].params[1].default_value
    this.v = this.$store.state.ExampleData[0].params[2].default_value
    this.gr = this.$store.state.ExampleData[0].params[3].default_value
    this.gs = this.$store.state.ExampleData[0].params[4].default_value
    this.cs = this.$store.state.ExampleData[0].params[5].default_value
    this.cr = this.$store.state.ExampleData[0].params[6].default_value
    this.p = this.$store.state.ExampleData[0].params[7].default_value
  },
  methods: {
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(
        key => this.openKeys.indexOf(key) === -1
      )
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : []
      }
    },
    compute() {
      this.axios
        .post('/course/calc_example/', {
          example_key: this.$store.state.ExampleKey,
          param: {
            phi: this.φ,
            w: this.w,
            v: this.v,
            gr: this.gr,
            gs: this.gs,
            cr: this.cr,
            cs: this.cs,
            p: this.p,
          },
        })
        .then(res => {
          this.res = res
          this.picArr = res.urls.map(item => this.URL+'/' + item)
        })
    },
  },
}
</script>

<style lang="scss">
.shouyigongxiang {
  display: flex;
  .right {
    // background-color: skyblue;
    flex: 1;
    .description {
      padding: 0px 20px 0 20px;
      span {
        display: block;
        margin-bottom: 10px;
      }
    }
    .parameter {
      padding: 0 20px 20px 20px;
      span {
        display: inline-block;
        margin-bottom: 10px;
      }
      .pictures {
        margin-bottom: 10px;
      }
      .dataNum {
        display: flex;
        justify-content: space-between;
      }
      .ant-input {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-variant: tabular-nums;
        list-style: none;
        font-feature-settings: 'tnum';
        position: relative;
        display: inline-block;
        width: 80px;
        height: 32px;
        padding: 4px 11px;
        color: rgba(0, 0, 0, 0.65);
        font-size: 14px;
        line-height: 1.5;
        background-color: #fff;
        background-image: none;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        transition: all 0.3s;
      }
    }
    .functions {
      padding: 0 20px 20px 20px;
    }
    .compute {
      padding-right: 20px;
      width: 100%;
      display: flex;
      justify-content: flex-end;
      border-bottom: 1px solid #ccc;
      .button {
        margin-bottom: 10px;
      }
    }
    .result {
      margin-top: 20px;
      display: flex;
      .ant-card-meta-title {
        overflow: hidden;
        color: rgba(0, 0, 0, 0.85);
        font-weight: 500;
        font-size: 16px;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: center;
      }
    }
  }
}
</style>
